<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>泽州县应急指挥系统</title>
    <link rel="stylesheet" href="./font/iconfont/iconfont.css">
    <link rel="stylesheet" href="./plugins/bootstrap-4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/event_detail.css">
</head>
<body>
    <div class="header">
        <a href="index.html">应急指挥中心</a>
        <h3>泽州县应急指挥系统</h3>
    </div>
    <div class="main-box">
        <div class="main-aside">
            <div class="user-box">
                <div class="user-img">
                    <img src="./images/admin.png" alt="">
                </div>
                <p class="user-name">
                    admin 
                    <a href="javascript:;" class="iconfont icon-tuichu"></a>
                </p>
            </div>
            <ul class="aside-menu">
                <li><a href="admin_index.html"><i class="iconfont icon-home"></i><span>首页</span><i class="iconfont icon-arrow-right arrow"></i></a></li>
                <li class="active">
                    <a href="javascript:;"><i class="iconfont icon-shijianguanli3"></i><span>事件管理</span><i class="iconfont icon-arrow-right arrow"></i></a>
                    <div class="dropDown hd">
                        <a class="dropDownItem active" href="event_manage.html">事件管理</a>
                        <a class="dropDownItem" href="event_type.html">事件类型</a>
                    </div>
                </li>
                <li>
                    <a href="javascript:;"><i class="iconfont icon-yingjizhibanrenyuan"></i><span>值守人员管理</span><i class="iconfont icon-arrow-right arrow"></i></a>
                    <div class="dropDown hd">
                        <a class="dropDownItem" href="guard_unit.html">企业单位</a>
                        <a class="dropDownItem" href="guard_man.html">值守人员</a>
                        <a class="dropDownItem" href="guard_path.html">值守轨迹</a>
                    </div>
                </li>
                <li>
                    <a href="javascript:;"><i class="iconfont icon-yingjiyuan"></i><span>应急预案管理</span><i class="iconfont icon-arrow-right arrow"></i></a>
                    <div class="dropDown hd">
                        <a class="dropDownItem" href="plan_manage.html">应急预案</a>
                        <a class="dropDownItem" href="plan_type.html">类型管理</a>
                    </div>
                </li>
                <li>
                    <a href="javascript:;"><i class="iconfont icon-yingjiwuzi"></i><span>应急物资管理</span><i class="iconfont icon-arrow-right arrow"></i></a>
                    <div class="dropDown hd">
                        <a class="dropDownItem" href="supplies_manage.html">应急物资</a>
                        <a class="dropDownItem" href="supplies_type.html">类型管理</a>
                    </div>
                </li>
                <li><a href="info_publish.html"><i class="iconfont icon-xinxifabu"></i><span>信息发布</span><i class="iconfont icon-arrow-right arrow"></i></a></li>
                <li><a href="account_set.html"><i class="iconfont icon-shezhi"></i><span>账号设置</span><i class="iconfont icon-arrow-right arrow"></i></a></li>
            </ul>
        </div>
        <div class="main-body flex-column scroll-bar">
            <div class="main-header flex-row">
                <h3>自然灾害详情</h3>
                <span>上报时间：2020/01/16 12:23</span>
            </div>
            <div class="main-content flex1">
              <div class="event-detail-info flex-row">
                  <div class="flex1">
                    <p>编号：202001161223002</p>
                    <p>上报单位：珏山风景区</p>
                    <p>事件发生时间： 2020/01/16 12:23</p>
                    <p>上报描述：珏山森林氧吧失火，请求协助</p>
                    <div class="file-box">
                        <label for="">附件</label>
                        <div class="file-list">
                            <div class="img-box">
                                <img src="./temporary/image4.png" alt="">
                            </div>
                        </div>
                    </div>
                  </div>
                  <div class="flex1">
                    <p> 状态：已完成</p>
                    <p>上报人电话：15225656655</p>
                    <p>位置：珏山风景区森林氧吧</p>
                  </div>
              </div>
            <!-- 处理记录 -->
            <div class="records-box">
                <h3>处理记录</h3>
                <div class="flex-row">
                    <p>接警人:安全部 张三丰</p>
                    <p>接警时间：2020/01/16 12:33</p>
                </div>
                <div class="records-tab">
                    <div class="tab-title">
                        <a href="javascript:;">跟进记录</a>
                        <a href="javascript:;" class="active">事件反馈</a>
                    </div>
                    <div class="tab-content">
                        <ul class="hd">
                            <li>
                                <p>连线时间：2019-19-17 12:23:34</p>
                                <p>连线方式：语音</p>
                                <p>连线记录:<audio src="" controls></audio></p>
                            
                            </li>
                            <li>
                                <p>连线时间：2019-19-17 12:23:34</p>
                                <p>连线方式：视频</p>
                                <p>连线记录:<video src="" controls></video></p>
                            
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>反馈时间：2019-19-17 12:23:34</p>
                                <p>反馈内容：已查明情况，游客已找回财务，游客已离开。</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 备注 -->
            <form action="">
                <div class="form-group">
                    <label for="">备注</label>
                   <div class="event-note">
                       <textarea placeholder="请输入备注内容"></textarea>
                   </div>
                </div>
            </form>
            <div class="btn-box">
                <a href="javascript:;" class="editor-btn">确定</a>
                <a href="javascript:;" class="add-btn">取消</a>
            </div>
            </div>
        </div>
    </div>
    <script src="./plugins/jquery-3.4.1.min.js"></script>
    <script src="./plugins/bootstrap-4.0.0/js/bootstrap.min.js"></script>
    <script src="./plugins/laydate/laydate.js"></script>
    <script src="./js/common.js"></script>
  <script>
       laydate.render({
            elem: '#select-date'
            ,type: 'date'
            ,range: true
        });
        // tab栏切换
        $('.tab-title > a').click(function(){
            let index=$(this).index()
            console.log(index)
            $(this).addClass('active').siblings().removeClass('active')
            $('.tab-content>ul').eq(index).removeClass('hd').siblings().addClass('hd')
        })
  </script>
</body>
</html>